<template>
  <component :is="ct.comp.guide" />
  <div :class="`comp_${cfg.route.params.id}`">
    <div class="dljjc_box3_x">
      <div class="nm_mtab">
        <m-tabs
          :value="cfg.route.params?.id"
          :data="val"
          suffix
          @update:value="ct.tabhand"
          :list="ct.tablist"
        />
        <template v-if="ct.comp[cfg.route.params.id] != null">
          <component
            :is="ct.comp[cfg.route.params.id]"
            @update_load="ct.load"
            :load="val.comp_loading"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { cfg } from "@/cfg/cfg.js";
import guide from "./set.vue";

export default {
  setup() {
    const ct = {
      load: (bl) => {
        val.comp_loading = false;
      },
      tabhand: (routename) => {
        if (cfg.route.path == `/gt/gn-${routename}`) {
          return false;
        }
        val.comp_loading = true;
        cfg.router.push({
          path: `/gt/gn-${routename}`,
        });
      },
      comp: {
        fdb: defineAsyncComponent(() => import(`./comp/gb_fdb.vue`)),
        sjb: defineAsyncComponent(() => import(`./comp/gb_raids_olist.vue`)),
        yc: defineAsyncComponent(() => import(`./comp/gb_boss_yc.vue`)),
        kytj: defineAsyncComponent(() => import(`./comp/gb_kytj.vue`)),
        kymn: defineAsyncComponent(() => import(`./comp/gb_kymn.vue`)),
        diamond: defineAsyncComponent(() => import(`./comp/gb_diamond.vue`)),
        bjjsq: defineAsyncComponent(() => import(`./comp/fc_bjjsq.vue`)),
        mastery: defineAsyncComponent(() => import(`./comp/gb_mastery.vue`)),
        api: defineAsyncComponent(() => import(`./comp/gn_api.vue`)),
        hz: defineAsyncComponent(() => import(`./comp/zy_hz.vue`)),
        slime: defineAsyncComponent(() => import(`./comp/zy_slime.vue`)),
        gl: defineAsyncComponent(() => import(`./comp/zy_gl.vue`)),
        guide,
      },
      tablist: [
        {
          title: "攻略",
          pcshow: true,
          tablist: [
            {
              name: "一图流攻略",
              label: "一图流攻略",
              key: "gl",
            },
            {
              name: "会战作业",
              label: "会战作业",
              key: "hz",
            },
            {
              name: "地牢作业",
              label: "地牢作业",
              key: "slime",
            },
          ],
        },
        {
          title: "表格",
          pcshow: true,
          tablist: [
            {
              name: "刻印图鉴",
              label: "刻印图鉴",
              key: "kytj",
            },
            {
              name: "队伍推荐表",
              label: "队伍推荐表",
              key: "team",
            },
            {
              name: "会战赛季表",
              label: "会战赛季表",
              key: "sjb",
            },
            {
              name: "会战分刀表",
              label: "会战分刀表",
              key: "fdb",
            },
          ],
        },
        {
          title: "功能",
          pcshow: true,
          tablist: [
            {
              name: "刻印模拟",
              label: "刻印模拟",
              key: "kymn",
            },
            {
              name: "首领异常",
              label: "首领异常",
              key: "yc",
            },

            {
              name: "精通模拟",
              label: "精通模拟",
              key: "mastery",
            },
            {
              name: "钻石收益",
              label: "钻石收益",
              key: "diamond",
            },

            {
              name: "队伍暴击计算",
              label: "队伍暴击计算",
              key: "bjjsq",
            },
          ],
        },
        {
          title: "其他",
          pcshow: true,
          tablist: [
            {
              name: "API接口",
              label: "API接口",
              key: "api",
            },
          ],
        },
      ],
    };
    const val = reactive({
      comp_loading: false,
    });
    onMounted(async () => {
      val.comp_loading = true;
    });
    return { cfg, ct, val };
  },
};
</script>
